<script>
// 赶时间，还有很多优化的空间
import Focus from '@/components/focus';
import FeatureCommon from '@/components/feature-common';
import FeatureBase from '@/components/feature-base';
import FeatureSocial from '@/components/feature-social';
import FeatureBusiness from '@/components/feature-business';
import { mapState } from 'vuex';

export default {
  components: {
    Focus,
    FeatureCommon,
    FeatureBase,
    FeatureSocial,
    FeatureBusiness,
  },
  data() {
    return {
      tabs: [
        {
          text: '技术特性',
          id: 0,
        },
        {
          text: '基础特性',
          id: 1,
        },
        {
          text: '社交特性',
          id: 2,
        },
        {
          text: '商业特性',
          id: 3,
        },
      ],
      curTab: 0,
    };
  },
  computed: {
    ...mapState({
      desc: (state) => state.config.featurePageText || {},
    }),
  },
  mounted() {
    const { query } = this.$route;
    if (query.tab && [1, 2, 3].indexOf(Number(query.tab)) !== -1) this.curTab = Number(query.tab);
    this.scrollToTop();
  },
  methods: {
    handleTabClick(item) {
      this.curTab = item.id;
    },
    scrollToTop() {
      window.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth',
      });
    },
  },
};
</script>

<template>
  <section class="dzq-layout__content">
    <div class="dzq-index-section dzq-index-section--lightbg">
      <div class="dzq-index-section__hd">
        <h2 class="dzq-index-section__title dzq-index-section__title-type">
          <span>Discuz! Q 的特性</span>
        </h2>
        <p class="dzq-index-section__description">{{ desc.discuzFeature }}</p>
      </div>
    </div>
    <div class="dzq-index-section dzq-tabs">
      <div class="dzq-tabs-content">
        <div
          v-for="item in tabs"
          :key="item.id"
          class="dzq-tabs-item"
          @click="handleTabClick(item)"
        >
          <span :class="item.id === curTab ? 'dzq-tabs-text dzq-active' : 'dzq-tabs-text'">
            {{ item.text }}
          </span>
        </div>
      </div>
      <div class="dzq-tabs--bline"></div>
    </div>
    <FeatureCommon v-show="curTab === 0" />
    <FeatureBase v-show="curTab === 1" />
    <FeatureSocial v-show="curTab === 2" />
    <FeatureBusiness v-show="curTab === 3" />
    <Focus />
  </section>
</template>

<style lang="scss">
.dzq-tabs {
  height: 86px;
  .dzq-tabs-content {
    margin: 0 auto;
    max-width: 1200px;
    text-align: center;
  }
  .dzq-tabs--bline {
    margin: 0 auto;
    max-width: 1200px;
    height: 2px;
    background-image: linear-gradient(#dfdede, #dfdede), linear-gradient(#006eff, #006eff);
    background-blend-mode: normal, normal;
  }
  .dzq-tabs-item {
    display: inline-block;
    width: 25%;
    cursor: pointer;
  }
  .dzq-tabs-text {
    font-size: 18px;
    line-height: 54px;
    color: #242d4e;
    &.dzq-active {
      position: relative;
      color: #006eff;
      &:before {
        content: '';
        display: inline-block;
        position: absolute;
        top: 36px;
        left: 0;
        width: 70px;
        height: 3px;
        background-color: #006eff;
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .dzq-tabs {
    padding: 0;
    height: 47px;
    line-height: 45px;
    .dzq-tabs--bline {
      height: 1;
      background-color: #f7fbff;
      background-image: none;
    }
    .dzq-tabs-text {
      font-size: 17px;
      line-height: 11px;
      &.dzq-active {
        &:before {
          top: 32px;
          height: 2px;
        }
      }
    }
  }
}
</style>
